<template>
    <div class="backstage">
        <div class="heard">
            <el-radio-group v-model="isCollapse" style="float: left;margin-left: -2px;">
                <el-radio-button :label="false"><i class="el-icon-s-unfold" style="font-size: 20px;"></i></el-radio-button>
                <el-radio-button :label="true"><i class="el-icon-s-fold" style="font-size: 20px;"></i></el-radio-button>
            </el-radio-group>
            <div style="color: white;font-size: 26px;font-weight: bold;text-align: center;padding: 4px;">
                Zero 官网后台管理系统
            </div>
            <div style="color: white;float: right;margin-top: -30px;padding-right: 10px;">
                欢迎！！{{username}}
            </div>
        </div>
        <div class="navigation">

            <el-menu default-active="/backstage/control/hardware" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" :router="true">
                <el-submenu index="0">
                    <template slot="title">
                        <i class="el-icon-view"></i>
                        <span>控制面板</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/backstage/control/hardware">服务器详情</el-menu-item>
                        <el-menu-item index="/backstage/control/statistics">Zero分析</el-menu-item>
                        <el-menu-item @click="retrunIndex">返回首页</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span slot="title">人员管理</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">管理员管理</span>
                        <el-menu-item index="/backstage/adminList">详情</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="用户管理">
                        <el-menu-item index="/backstage/userManage">详情</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">热门商品</span>
                        <el-menu-item index="/backstage/goods/popularity">人气商品</el-menu-item>
                        <el-menu-item index="/backstage/goods/newGoods">新品商品</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="导航商品">
                        <el-menu-item index="/backstage/ordinaryGoods/goodsIndexOne">商品一</el-menu-item>
                        <el-menu-item index="/backstage/ordinaryGoods/goodsIndexTwo">商品二</el-menu-item>
                        <el-menu-item index="/backstage/ordinaryGoods/goodsIndexThree">商品三</el-menu-item>
                        <el-menu-item index="/backstage/ordinaryGoods/goodsIndexFour">商品四</el-menu-item>
                        <el-menu-item index="/backstage/ordinaryGoods/goodsIndexFive">商品五</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">购物车管理</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">订单管理</span>
                        <el-menu-item index="/backstage/shoppCar">详情</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-postcard"></i>
                        <span slot="title">最新资讯</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/backstage/news">管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <div class="router_view">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "backstage",
        data() {
            return{
                isCollapse: false,
                username:'杨燊'
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            retrunIndex(){
                this.$parent.backCheck(true);
                this.$router.push({path:'/'});
            }
        },created() {
            this.username =sessionStorage.getItem('key');
        }
    }
</script>

<style scoped lang="scss">
.backstage{
    width: 100%;
    padding: 0;
    margin: 0;
    .navigation{
        height: 590px;
        overflow: auto;
    }
    .navigation::-webkit-scrollbar {
        width: 4px;
        scrollbar-arrow-color:red;
    }
    .heard{
        padding: 0;
        margin: 0;
        background-color: #409eff;
        width: 100%;
        height: 44px;
    }
    .navigation{
        float: left;
        margin-left: -5px;
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 590px;
        }
        .el-menu-item{
            text-align: right;
        }
    }
    .router_view{
        width: 75%;
        float: left;
        margin-left: 20px;
        margin-top: 10px;
    }
}

</style>
